<template>
	<view v-if="item" class="wrap-item">
		<view class="title-bg">
			<view class="must" v-if="item.hasOwnProperty('require') && item.require">
				*
			</view>
			<!-- 			<view class="title">
				{{ item.title }}
			</view> -->
		</view>

		<view class="wrap-list m-t-30">
			<block v-for="(imgItem, imgIdx) in value === '' ? [] : value.split(',')" :key="imgIdx">
				<view class="photo-item">
					<image class="photo-img" mode="aspectFill" :src="$wanlshop.oss(imgItem)" />

					<image class="photo-delete" :src="$staticImagePath('store/delete.png')"
						@click="onDeleteImage(imgIdx)" />
				</view>
			</block>
			<image class="photo-item" v-if="isShow()&&name==1" :src="$staticImagePath('store/upload.png')"
				@click="onChooseImage" />
			<image class="photo-item" v-if="isShow()&&name==2" :src="$staticImagePath('store/upload.png')"
				@click="onChooseImage" />
			<image class="photo-item" v-if="isShow()&&name==3" :src="$staticImagePath('store/upload.png')"
				@click="onChooseImage" />
			<image class="photo-item" v-if="isShow()&&name==4" :src="$staticImagePath('store/upload.png')"
				@click="onChooseImage" />

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			name: {
				type: Number,
				default: 1,
			}
		},
		data() {
			return {
				imageList: [],
			};
		},
		computed: {
			maxNumber() {
				var maxNum = 1;
				if (this.item && this.item.hasOwnProperty("maxNum")) {
					maxNum = this.item.maxNum;
				}
				return maxNum;
			}
		},
		methods: {
			/**
			 * 是否显示
			 */
			isShow() {
				if (this.value === "" || this.value.split(",").length < this.maxNumber) {
					return true;
				} else {
					return false;
				}
			},
			/**
			 * 选择图片
			 */
			onChooseImage() {
				let array = this.$filters.getImageArray(this.value);
				this.$filters.onChooseImage(this.maxNumber - array.length, (list) => {
					this.onUploadImage(0, list);
				});
			},
			/**
			 * 上传图片
			 */
			onUploadImage(index, list) {
				this.$commonNetwork.onUploadFile(list[index], (res) => {
					this.imageList.push(res.url);

					if (index < list.length - 1) {
						this.onUploadImage(index + 1, list);
					} else {
						let array = this.$filters.getImageArray(this.value);
						array = array.concat(this.imageList);
						this.$emit("input", array.join(","));
						this.imageList = [];
					}
				});
			},
			/**
			 * 删除图片
			 */
			onDeleteImage(index) {
				let array = this.$filters.getImageArray(this.value);
				array.splice(index, 1);
				this.$emit("input", array.join(","));
			},
		},
	}
</script>

<style lang="scss" scoped>
	// @import "../css/form.css";
	.wrap-item {
		width: 100%;
		padding: 35rpx 0rpx 30rpx 0rpx;
		border-bottom: 2rpx solid #f4f4f4;
	}

	.title-bg {
		gap: 5rpx;
		color: #121212;
		font-size: 30rpx;
		display: flex;
	}

	.must {
		color: #fa1d00;
	}

	.m-t-30 {
		margin-top: 30rpx;
	}

	.wrap-list {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		column-gap: 24rpx;
		row-gap: 20rpx;
	}

	.photo-delete {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 30rpx;
		height: 30rpx;
		z-index: 3;
	}

	.photo-item {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}

	.photo-img {
		width: 100%;
		height: 100%;
	}

	.input {
		--limit-num: 1;
		flex: 1;
		overflow: hidden;
		color: #121212;
		font-size: 30rpx;
	}

	.place {
		font-size: 30rpx;
		color: #cacaca;
	}

	.arrow {
		width: auto;
		height: 30rpx;
	}

	/* 文字显示行数 */
	.limit-num-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--limit-num);
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		word-wrap: break-word;
		white-space: normal;
		line-height: 1.5;
	}

	.text-right {
		text-align: right;
	}

	.unit {
		color: #84BD00;
		font-size: 30rpx;
	}

	.row-item {
		gap: 20rpx;
	}

	.wrap-right {
		flex: 1;
		overflow: hidden;
		gap: 20rpx;
	}

	.group-list {
		flex: 1;
		overflow: hidden;
		gap: 30rpx;
	}

	.group-item {
		gap: 20rpx;
	}

	.group-choose {
		width: 40rpx;
		height: 40rpx;
	}

	.group-img {
		width: 100%;
		height: 100%;
	}

	.group-name {
		color: #666666;
		font-size: 30rpx;
	}

	.wrap-textarea {
		width: 100%;
		height: 300rpx;
		box-sizing: border-box;
		color: #121212;
	}
</style>